<template>
  <div>
    <div class="content">
      <div class="taocang_content">
        <div class="tancang_bg"/>
        <div class="tancang_bg"/>
        <h3 style="height: 160px;overflow: hidden;">
          <span class="tc_left">{{ product.pname }}</span>
          <span class="tc_right">{{ product.pprice }}元</span>
        </h3>
        <img :src="product.pmoreImg">
      </div>
      <div class="taocang_detail">
        <div class="detail_item">
          <span class="taocang_icon hz_icon"/>
          <b>化妆</b>
          <i>{{ product.desc1 }}</i>
        </div>
        <div class="detail_item">
          <span class="taocang_icon fz_icon"/>
          <b>服装</b>
          <i>{{ product.desc2 }}</i>
        </div>
        <div class="detail_item">
          <span class="taocang_icon ps_icon"/>
          <b>拍摄</b>
          <i>{{ product.desc3 }}</i>
        </div>
        <div class="detail_item">
          <span class="taocang_icon xt_icon"/>
          <b>修图</b>
          <i>{{ product.desc4 }}</i>
        </div>
        <div class="detail_item">
          <span class="taocang_icon cy_icon"/>
          <b>冲印</b>
          <i>{{ product.desc5 }}</i>
        </div>
      </div>
      <div class="hos_produce_content">
        <ul class="taocang_select clearfloat f16 color_333">
          <li><span :class="{on: currentIndex == 0 }" @click="showContext(0)">展示</span></li>
          <li><span :class="{on: currentIndex == 1 }" @click="showContext(1)">服务体验</span></li>
        </ul>
        <div v-show="currentIndex == 0" v-html="product.desc6"/>
        <div v-show="currentIndex == 1" v-html="product.desc7"/>
      </div>
      <div class="bottom_btn" @click="showOrder">预约</div>
    </div>
    <div v-if="isShowMask" class="mask">。。。。。。。。。。</div>
    <div v-if="isShowOrder" class="meal_content" style="z-index: 1000">
      <div class="meal_head">
        {{ product.pname }}
        <span class="close_icon" @click="isShowOrder = false" />
      </div>
      <!-- 产品类型 -->
      <div class="mealdetail_content" >
        <p class="produce_meal">
          产品类型
          <a>产品说明</a>
        </p>
        <div class="meal_detail" >
          <a v-for="item in productOptions" :class="{cur: item == selectProduct}" @click="selectProductF(item)">{{ item.pname }}</a>
        </div>
      </div>
      <!-- 拍摄人数 -->
      <div v-if="isShowPeople" class="mealdetail_content" >
        <p class="produce_meal">
          拍摄人数
          <el-input-number v-model="peopleCount" :min="selectProduct.minNum" :max="selectProduct.maxNum" small label="描述文字"/>
        </p>
      </div>
      <!-- 升级体验 -->
      <div v-if="itemCodes && itemCodes.length > 0" class="mealdetail_content" >
        <p class="produce_meal">
          {{ itemCodes[0].itemName }}
          <a>{{ itemCodes[0].itemName }}说明</a>
        </p>
        <div class="meal_detail">
          <a v-for="item in itemCodes" :class="{cur: item == selectItemCode}" @click="selectItemF(item)">{{ item.itemValue }}</a>
        </div>
      </div>

      <div class="bottom_meal">
        <p>合计：<em>{{ total }}</em>元</p>
        <div class="comfirm_btn" @click="showShop">确 定</div>
      </div>
    </div >

    <div v-if="isShowShop" class="window_bg" style="z-index: 1000">
      <div class="meal_content">
        <div class="meal_head">
          选择门店1
          <span class="close_icon" @click="isShowShop = false"/>
        </div>
        <div class="mealdetail_content">
          <p class="produce_meal border_bottom">
            <i>定位城市:<em> {{ city.cityName }}</em></i>
            <a class="changecity" @click="showCity">更换城市</a>
          </p>
          <div v-for="item in shopDatas" class="storecity_content">
            <p class="store_cityname">{{ item.shopName }}
            <span><input :value="item" v-model="selectShop" name="shop" type="radio" class="radio-bg"></span></p>
            <p class="store_address">{{ item.shopArea + item.shopAreaName + item.shopAddress }}</p>
          </div>
        </div>
        <div class="bottom_meal">
          <div class="comfirm_btn" @click="goCart">确 定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import indexApi from '@/api/photo/indexApi'
import '@/utils/rem'
export default {
  name: 'ProductDetails',
  data() {
    return {
      pid: '',
      cid: '',
      currentIndex: 0,
      product: {
        pid: '',
        pname: '',
        pindexImg: '',
        pmoreImg: '',
        pprice: '',
        desc1: '',
        desc2: '',
        desc3: '',
        desc4: '',
        desc5: '',
        desc6: '',
        desc7: '',
        parentId: '',
        maxNum: '',
        minNum: '',
        personPrice: '',
        cheapMoney: '',
        createdTime: '',
        modifiedTime: '',
        validFlag: '1'
      },
      productOptions: [],
      activeName: 'first',
      isShowOrder: false,
      peopleCount: 1,
      selectProduct: null,
      selectItemCode: null,
      isShowShop: false,
      selectShop: null,
      shopDatas: [],
      selectShop: ''
    }
  },
  computed: {
    itemCodes() {
      if (this.selectProduct && this.selectProduct.sxProductItemConfigs) {
        return this.selectProduct.sxProductItemConfigs
      } else {
        return []
      }
    },

    // submitOrder() {
    //   this.$router.push({ path: '/userSubmitOrder', query: this.selectItemCode })
    // },

    total() {
      let result = 0.0
      if (this.selectProduct) {
        result += this.selectProduct.pprice
        if (this.isShowPeople) {
          result += this.selectProduct.personPrice * (this.peopleCount - this.selectProduct.minNum)
        }
        if (this.selectItemCode) {
          result += this.selectItemCode.itemPrice
        }
      }
      return result
    },
    isShowMask() {
      return this.isShowShop || this.isShowOrder
    },
    city() {
      return this.$store.state.person.city
    },
    isShowPeople() {
      let result = false
      result = this.selectProduct && this.selectProduct.minNum && this.selectProduct.maxNum && this.selectProduct.maxNum > this.selectProduct.minNum
      return result
    }
  },
  watch: {
    selectShop(newVal, oldVal) {
      debugger
      if (newVal) {
        this.$store.commit('SET_SHOP', newVal)
      }
    }
  },
  created() {
    const pid = this.$route.params && this.$route.params.pid
    this.pid = pid
    this.activeName = 'first'
    this.getProductDetails()
  },
  methods: {
    showContext(index) {
      this.currentIndex = index
    },
    showOrder() {
      // 判断是否登陆 没有跳转到对应的页面
      const openId = localStorage.getItem('openId')
      if (!openId) {
        this.$router.push({ path: `/userWel?flag=1&redirect=${this.$route.path}` })
      } else {
        this.getProductOptions()
        this.isShowOrder = true
      }
    },
    getProductDetails() {
      indexApi.getProductDetail({ pid: this.pid }).then(data => {
        this.product = data
      })
    },
    getProductOptions() {
      if (!this.productOptions || this.productOptions.length === 0) {
        indexApi.getProductOptions({ cid: this.cid, pid: this.pid }).then(data => {
          this.productOptions = data
          this.selectProductF(data[0])
        })
      }
    },
    selectProductF(product) {
      this.selectProduct = product
      this.selectItemCode = this.itemCodes && this.itemCodes.length > 0 ? this.itemCodes[0] : null
    },
    selectItemF(item) {
      this.selectItemCode = item
    },
    showShop() {
      this.isShowOrder = false
      this.isShowShop = true
      this.getShopData()
    },
    showCity() {
      this.$router.push({ name: 'userCity', params: { prefixRouter: this.$route.path }})
    },
    getShopData() {
      // 获取门店信息
      indexApi.getShopDataByCity({ cityName: this.city.cityName }).then(data => {
        this.shopDatas = data
      })
    },
    selectShopF(item, event) {

    },
    goCart() {
      // 添加产品
      this.$store.commit('addCart', {
        product: this.product,
        productType: this.selectProduct,
        itemConfig: this.selectItemCode,
        peopleCount: this.peopleCount,
        total: this.total
      })
      this.$router.push({ path: '/userCart' })
    },
    submitOrder() {
      this.$router.push({ path: '/userSubmitOrder', query: this.selectItemCode })
    }
  }
}
</script>

<style>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
  body{-webkit-text-size-adjust: none!important;}
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
  }
  .border_bottom{
    border-bottom: 1px solid #eeeeee;
  }
  .storecity_content{
    position: relative;
    text-align: left;
    margin: .15rem 0 .55rem 0;
  }
  .storecity_content .store_cityname{
    width: 90%;
    margin: 0 auto;
    font-size: .35rem;
    font-weight: 700;
    height: .56rem;
    line-height: .56rem;
    vertical-align: bottom;
    position: relative;
    color: #000000;
  }
  .storecity_content .store_address{
    font-size: .28rem;
    width: 90%;

  }
  .address_head{
    width: 100%;
    color: #000000;
  }
  .address_head h4{
    height: 1rem;
    line-height: 1rem;
    padding-left:.3rem;
    font-size: .32rem;
  }
  .address_head p{
    padding-left:.3rem;
    height: .8rem;
    line-height: .8rem;
    font-size: .36rem;
    background-color: #ffffff;
    box-shadow: 0 .1rem .2rem rgba(200, 198, 198, 0.35);
  }
  .address_head img{
    width: .3rem;
    height: auto;
    padding-right: .2rem;
    margin-top: -.1rem;
  }
</style>
